<html version="-//W3C//DTD HTML 4.01 Transitional//EN">

    <head>
        <style type="text/css">    
            .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;    
                cursor: pointer;    
            }
            .pg-selected {
                color: black;
                font-weight: bold;        
                text-decoration: underline;
                cursor: pointer;
            }
        </style>
        
        <script type="text/javascript" src="paging.js"></script>
    </head>
    
    <body>
        <form action="" method="get" enctype="application/x-www-form-urlencoded">
        <table id="results">
            <tr>
                <th>#</th>
                <th>field</th>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text" name="field-name" value="rec1"></td>
            </tr>
            <tr>
                <td>2</td>
                <td><input type="text" name="field-name" value="rec2"></td>
            </tr>
            <tr>
                <td>3</td>
                <td><input type="text" name="field-name" value="rec3"></td>
            </tr>
            <tr>
                <td>4</td>
                <td><input type="text" name="field-name" value="rec4"></td>
            </tr>
            <tr>
                <td>5</td>
                <td><input type="text" name="field-name" value="rec5"></td>
            </tr>
            <tr>
                <td>6</td>
                <td><input type="text" name="field-name" value="rec6"></td>
            </tr>
            <tr>
                <td>7</td>
                <td><input type="text" name="field-name" value="rec7"></td>
            </tr>
            <tr>
                <td>8</td>
                <td><input type="text" name="field-name" value="rec8"></td>
            </tr>
            <tr>
                <td>9</td>
                <td><input type="text" name="field-name" value="rec9"></td>
            </tr>
            <tr>
                <td>10</td>
                <td><input type="text" name="field-name" value="rec10"></td>
            </tr>
        </table>
        <div id="pageNavPosition"></div>
        <div><input type="submit" onclick="alert('Hey, this is just a sample!'); return false;" />&nbsp;<input type="reset" /></div>
    </form>
    
    <script type="text/javascript"><!--
        var pager = new Pager('results', 3); 
        pager.init(); 
        pager.showPageNav('pager', 'pageNavPosition'); 
        pager.showPage(1);
    //--></script>
    
    </body>
</html>
